<template>
  <div>
    <el-card>
      <!-- 头部 -->
      <div slot="header" class="clearfix">
        <span>添加账号</span>
      </div>
      <!-- 内容 -->
      <div class="content">
        <!-- 添加账号表单 -->
        <el-form
          ref="accountAddForm"
          size="small"
          :model="accountAddForm"
          status-icon
          :rules="rules"
          label-width="100px"
        >
          <!-- 账号 -->
          <el-form-item label="账号" prop="account">
            <el-input
              v-model="accountAddForm.account"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="accountAddForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <!-- 用户名 -->
          <el-form-item label="用户名" prop="userGroup">
            <el-select
              v-model="accountAddForm.userGroup"
              placeholder="请选择用户组"
            >
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="普通管理员" value="普通管理员"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('accountAddForm')">添加</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
//引入工具函数
import {checkName,checkPwd} from '@/utils/verification.js'
//引入ajax函数
import {addAccount } from '../../api/user'
export default {
  //数据
  data() {
    return {
      // 添加账号表单
      accountAddForm: {
        account: "",
        password: "",
        userGroup: "",
      },

      //验证规则
      rules: {
        //账户
        account: [
          { required: true, validator: checkName, trigger: 'blur' }
        ],
        //密码
        password: [
          { required: true, validator: checkPwd, trigger: 'blur' }
        ],
        //用户
        userGroup: [
          { required: true, message: "请选择用户组", trigger: "change" },
        ],
      },
    };
  },

  //方法
  methods: {
    //添加账号
    submitForm(accountAddForm) {
      // console.log(111);
      // console.log(this.$refs.accountAddForm);
      //选中整个表单  调用验证方法
      this.$refs.accountAddForm.validate(async(valid) => {
        if (valid) {
          //发送添加账号的请求
          let res = await addAccount(this.accountAddForm)
           console.log(res.data,'11');
         // 接收后端的数据
           let {code,msg} = res.data
           if(code===0){
          //   this.$message({
          //     message:msg,s
          //     type:'success'
          //   })
          this.$router.push('/account/account-list')
           }else{
          //   this.$message.error(msg)
           }
          
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    //重置表单
    resetForm() {
      console.log(this.$refs.accountAddForm);
      //选中整个表单  重置表单
      this.$refs.accountAddForm.resetFields((valid) => {
        if (valid) {
          alert("重置成功");
        } else {
          console.log("重置失败");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 206.5px;
}
</style>